<template lang='pug'>
.demo(id='demo')
    cesiumContainer
        c_layer_ArcGisMap
        cLayer
        c_pop_billboards(:arrda='billboards')
    tsPanel(style="width:300px;height:240px;left:10px;top:50px")
        template(#header) 灾害天气预警
        template(#content) 
            .card1_row(v-for='itm,idx in card1') {{itm}}
    tsPanel(style="width:300px;height:250px;left:10px;top:320px")
        template(#header) 园内情况
        template(#content)
            .card2_panel
                template(v-for="itm,idx in card2")
                    pie(:inf="itm")
    tsPanel(style="width:300px;height:250px;left:10px;top:600px")
        template(#header) 自然灾害报警情况
        template(#content)
            el-table(:data="tab3" style='width:95%;margin:0px auto')
                el-table-column(prop="nam" label="报警名称" width="90")
                el-table-column(prop="type" label="报警类型" width="100")
                el-table-column(prop="time" label="报警时间" width="100")
    tsPanel(style="width:360px;height:250px;right:10px;top:50px")
        template(#header) 预案查询
        template(#content)
            el-table(:data="tab4" style='width:95%;margin:0px auto')
                el-table-column(prop="id" label="序号" width="50")
                el-table-column(prop="nam" label="名称" width="100")
                el-table-column(prop="type" label="类型" width="100")
                el-table-column(prop="operate" label="操作" width="90")
    tsPanel(style="width:360px;height:500px;right:10px;top:320px")
        template(#header) 现场摄像头
        template(#content)
            .card5_panel
                video(src="movie.ogg" controls="controls")
                video(src="movie.ogg" controls="controls")
                video(src="movie.ogg" controls="controls")
    .title 自然灾害
</template>

<script>
import pie from '../components/techStyle/pie.vue'
import tsPanel from '../components/techStyle/tsPanelCorn.vue'
import cesiumContainer from '../components/vcesium/viewer/cesiumContainer.vue'
import cLayer from '../components/vcesium/imageryLayers/cLayer.vue'
import c_pop_billboards from '../components/vcesium/popViewer/billboard.vue'
import c_layer_ArcGisMap from '../components/vcesium/imageryLayers/ArcGisMapServerImageryProvider.vue'
export default {
  name: 'demo',
  components:{
      cesiumContainer
      , cLayer, c_pop_billboards,c_layer_ArcGisMap,tsPanel,pie
  },
  data() {
    return {
        billboards:[],
        card1:[
            '预警标题:xxx',
            '预警类型:xxx',
            '发生时间:xxx',
            '预警等级:xxx',
            '推送等级:xxx',
            '具体内容:xxx'
        ],
        card2:[{color:'rgba(84,159,183,1)',count:10,label:'企业数量',unit:'个'},
        {color:'rgba(254,196,36,1)',count:10,label:'人数',unit:'个'},
        {color:'rgba(84,159,183,1)',count:10,label:'应急队伍数量',unit:'个'},
        {color:'rgba(254,196,36,1)',count:10,label:'应急物资种类',unit:'个'},
        {color:'rgba(254,196,36,1)',count:10,label:'重大危险源',unit:'个'},
        {color:'rgba(84,159,183,1)',count:10,label:'危化品仓库',unit:'个'},
        {color:'rgba(254,196,36,1)',count:10,label:'危化品种类',unit:'种'},
        {color:'rgba(84,159,183,1)',count:10,label:'危险工艺的生产场所',unit:'个'},
        ],
        tab3:[],
        tab3Config:[],
        tab4:[],
        card4_1:true

    }
  },
  mounted () {
    this.billboards=[{
        llh:{lon:110,lat:34,hei:1},
        image:'img/billboard.png',
        scale:0.2
    },{
        llh:{lon:110.1,lat:34,hei:1},
        image:'img/billboard.png',
        scale:0.2
    }]
  },

}
</script>

<style scoped>
.title{
    height: 30px;
    line-height: 30px;
    font-size: 36px;
    font-weight: bold;
    color: white;
    position:absolute;
    width: 100%;
    top: 20px;
    text-align: center;
}
.demo{
  width: 100%;
  height: 100%;
}
.card1_row{
    height: 32px;
    line-height: 30px;
    font-size: 22px;
    text-align: left;
    margin-left: 20px;
}
.card2_panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card3_panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card5_panel{
    overflow: hidden;
}
</style>
